import React, { Component } from "react";
// 引入轮播图组件
import { Carousel, Flex, Grid } from 'antd-mobile';
// 引入axios 发送请求,获取轮播图数据
import axios from 'axios'
//引入css样式
import './index.scss'
// 引入导航图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
export default class Index extends Component {
  state = {
    swiperData: [],
    groupData: [],
    newsData: [],
    cityInfo: {}
  }
  async componentDidMount() {
    // 在创建生命周期函数中发起请求
    this.getCtiyInfoData()
    this.getSwiperData()
    this.getGroupData()
    this.getNewsData()

  }
  // 获取城市定位
  getCtiyInfoData() {
    // 还要需要百度地图获取数据
    var myCity = new window.BMapGL.LocalCity();
    // myCity.get(myFun);
    myCity.get(async (result) => {
      // 发起请求  利用获取的城市名获取城市信息
      let res = await axios({
        url: "http://localhost:8080/area/info",
        params: { name: result.name }
      })
      if (res.data.status === 200) {
        this.setState({ cityInfo: res.data.body })
      }
    });
  }
  // 请求轮播图数据
  async getSwiperData() {
    let res = await axios({ url: 'http://localhost:8080/home/swiper' })
    console.log(res.data);
    if (res.data.status === 200) {
      this.setState({ swiperData: res.data.body })
    }
  }
  // 请求租房小组数据
  async getGroupData() {
    let res = await axios({
      url: "http://localhost:8080/home/groups",
      params: { area: this.state.cityInfo.value || 'AREA%7C88cff55c-aaa4-e2e0' },
    })
    // console.log(res);
    if (res.data.status === 200) {
      this.setState({ groupData: res.data.body })
    }
  }
  // 请求最新资讯数据
  async getNewsData() {
    let res = await axios({
      url: "http://localhost:8080/home/news",
      params: { area: this.state.cityInfo.value || 'AREA%7C88cff55c-aaa4-e2e0' },
    })
    if (res.data.status === 200) {
      this.setState({ newsData: res.data.body })
    }
  }
  // 封装轮播图组件
  swiperComponent() {
    if (this.state.swiperData.length) {
      return (<Carousel
        autoplay={true}
        autoplayInterval={2000}
        infinite
        // dots={false}
        dotStyle={{ bottom: '10px' }}
      >
        {this.state.swiperData.map(val => (
          <a
            key={val.id}
            href="http://www.baidu.com"
            style={{ display: 'inline-block', width: '100%', height: 212 }}

          >
            <img
              src={`http://localhost:8080${val.imgSrc}`}
              alt=""
              style={{ width: '100%', height: '100%', verticalAlign: 'top' }}
              onLoad={() => {
                // fire window resize event to change height
                window.dispatchEvent(new Event('resize'));
                this.setState({ imgHeight: 'auto' });
              }}
            />
          </a>
        ))}
      </Carousel>)
    }
    return null
  }
  // 封装导航区
  renderNavs = () => {
    let navsData = [
      { Image: Nav1, path: "/home/rent", name: '整租' },
      { Image: Nav2, path: "/home/rent", name: '合租' },
      { Image: Nav3, path: "/map", name: '地图找房' },
      { Image: Nav4, path: "/rent", name: '去出租' },
    ]
    return <Flex justify='between' align="center" >
      {navsData.map(item => {
        return <Flex.Item className="flexs" key={item.name} onClick={() => {
          this.props.history.push(item.path)
        }}>
          <img src={item.Image}></img>
          <h3>{item.name}</h3>
        </Flex.Item>
      })}
    </Flex>
  }
  // 封装租房小组模块
  renderGroup = () => {
    // 使用宫格组件
    return <Grid data={this.state.groupData} columnNum={2} hasLine={false} square={false} renderItem={(item) => {
      // console.log(item, index);
      return <Flex className="group-item" justify="around" key={item.id}>
        <div className="desc">
          <p className="title">{item.title}</p>
          <span className="info">{item.desc}</span>
        </div>
        <img
          src={"http://localhost:8080" + item.imgSrc}
          alt=""
        />
      </Flex>
    }} />
  }
  // 封装资讯模块
  renderNews = () => {
    return <Flex direction="column" justify="between" align="center">
      {this.state.newsData.map(item => {
        return <Flex.Item className="news-item" key={item.id}>
          <div className="imgwrap">
            <img src={'http://localhost:8080' + item.imgSrc}></img>
          </div>
          <div className="newsContext">
            <h4>{item.title}</h4>
            <div className="newsInfo">
              <span>{item.from}</span>
              <span>{item.date}</span>
            </div>
          </div>
        </Flex.Item>
      })}
    </Flex>
  }
  render() {
    return (<div className="index-wrap" >
      {/* 解决一开始轮播图不动问题,原因是一开始轮播图数据是一个空数组,这里我们使用条件判断 */}
      <div className="swiper-area">
        {this.swiperComponent()}
        {/* search框 */}
        <Flex className="search-box">
          <Flex className="search">
            <div className="location" onClick={this.props.history.push('/cityList')}>
              {this.state.cityInfo.label || '北京'}
              <i className="iconfont icon-arrow"></i>
            </div>
            <div className="form">
              <i className="iconfont icon-seach"></i>
              <span>请输入小区或地址</span>
            </div>
          </Flex>
          <i className="iconfont icon-map"></i>
        </Flex>
      </div>
      {/* 导航栏 */}
      <div className="navs">
        {this.renderNavs()}
      </div>
      {/* 小组找房 */}
      <div className="group">
        <div className="group-title">
          <h3>租房小组</h3>
          <span className="more">更多</span>
        </div>
        {/* 使用宫格 */}
        {this.renderGroup()}
      </div>
      {/* 最新资讯 */}
      <div className="news">
        <h3 className="news_title">最新资讯</h3>
        {this.renderNews()}
      </div>
    </div>)
  }
}
